<h1 mat-dialog-title>Style editor</h1>

<div class="modal-form-container">
  <form [formGroup]="formGroup">
    <mat-form-field class="form-field" *ngIf="element.fill !== undefined">
      <input
        matInput
        [ngModelOptions]="{ standalone: true }"
        placeholder="Fill color"
        type="color"
        [(ngModel)]="element.fill"
      />
    </mat-form-field>

    <mat-form-field class="form-field">
      <input
        matInput
        [ngModelOptions]="{ standalone: true }"
        placeholder="Border color"
        type="color"
        [(ngModel)]="element.stroke"
      />
    </mat-form-field>

    <mat-form-field class="form-field">
      <input
        matInput formControlName="borderWidth"
        placeholder="Border width"
        type="number"
        min="0"
        max="100"
      />
    </mat-form-field>

    <mat-form-field class="form-field" *ngIf="element.stroke_dasharray">
      <input
        matInput
        [ngModelOptions]="{ standalone: true }"
        placeholder="Border style"
        type="text"
        [(ngModel)]="element.stroke_dasharray"
      />
    </mat-form-field>

    <mat-form-field class="form-field" *ngIf="element.width !== undefined">
      <input
        matInput
        [ngModelOptions]="{ standalone: true }"
        placeholder="Width"
        min="0"
        type="number"
        [(ngModel)]="element.width"
      />
    </mat-form-field>

    <mat-form-field class="form-field" *ngIf="element.height !== undefined">
      <input
        matInput
        [ngModelOptions]="{ standalone: true }"
        placeholder="Height"
        min="0"
        type="number"
        [(ngModel)]="element.height"
      />
    </mat-form-field>


    <mat-form-field class="form-field" *ngIf="element.rx !== undefined">
      <input
        matInput
        [ngModelOptions]="{ standalone: true }"
        placeholder="Corner radius"
        type="number"
        min="0"
        max="100"
        [(ngModel)]="element.rx"
      />
    </mat-form-field>

    <mat-form-field class="form-field">
      <input matInput formControlName="rotation" placeholder="Rotation" type="number" />
    </mat-form-field>
  </form>
</div>

<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()" color="accent">Cancel</button>
  <button mat-button (click)="onYesClick()" tabindex="2" mat-raised-button color="primary">Apply</button>
</div>
